<template>
  <div class="box">
    <div class="text">
      <span>通知工单创建人</span>
    </div>

    <div class="switch1">
      <el-switch v-model="value1" active-text="开启" inactive-text="关闭">
      </el-switch>
    </div>

    <div class="text1">
      <span>工单被更新时，同步通知工单创建人</span>
    </div>

    <div class="fgline1">
      <el-divider></el-divider>
    </div>

    <div class="text2">
      <span>自动接单状态</span>
    </div>

    <div class="switch2">
      <el-switch v-model="value2" active-text="开启" inactive-text="关闭">
      </el-switch>
    </div>

    <div class="text3">
      <span>关闭时，将不会分配给您工单</span>
    </div>

    <div class="fgline2">
      <el-divider></el-divider>
    </div>

    <div class="text4">
      <span>工单回复可见范围</span>
    </div>

    <div class="radio">
      <template>
        <el-radio v-model="radio" label="1">仅客服可见</el-radio>
        <el-radio v-model="radio" label="2">所有人可见</el-radio>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: true,
      value2: true,
      radio: "1",
    };
  },
};
</script>


<style scoped>
.box {
  width: 1040px;
  height: 285px;
  background-color: #ffffff;
}

.text {
  width: 98px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 22px;
  left: 17px;
}

.switch1 {
  position: relative;
  top: 3px;
  left: 150px;
}

.text1 {
  width: 224px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 25px;
  left: 17px;
}

.fgline1 {
  width: 1000px;
  position: relative;
  top: 25px;
  left: 17px;
}

.text2 {
  width: 84px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 30px;
  left: 17px;
}

.switch2 {
  position: relative;
  top: 10px;
  left: 150px;
}

.text3 {
  width: 196px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 35px;
  left: 17px;
}

.fgline2 {
  width: 1000px;
  position: relative;
  top: 30px;
  left: 17px;
}

.text4 {
  width: 112px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 22px;
  left: 17px;
}

.radio {
  width: 300px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 3px;
  left: 152px;
}
</style>